<template>
	<view class="container">
		<view class="header">
			<view class="avatar">
				<image src="/static/avatar.png" />
			</view>
			<view class="username">用户名</view>
		</view>
		<view class="message-tags-class">
			<view class="message-tag" v-for="(item,index) in messageTags" @click="enterThis(item.jumpTo)">
				<MessageTags :img-src="item.url" :description="item.description" :background-color="item.backgroundColor" :messageCount="item.messageCount"></MessageTags>
			</view>
		</view>
		<view class="messages">
			<view class="message" v-for="(message, index) in messages" :key="index">
				<view class="avatar">
					<image :src="message.avatar" />
				</view>
				<view class="content">
					<view class="info">
						<view class="username">{{ message.username }}</view>
						<view class="time">{{ message.time }}</view>
					</view>
					<view class="text">{{ message.text }}</view>
				</view>
				<view class="unread" v-if="message.unread">{{ message.unread }}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import MessageTags from '@/componts/common/MessageTags/MessageTags.vue'
	export default {
		components: {
			MessageTags
		},
		data() {
			return {
				messages: [{
						avatar: "/static/img/main/avatar.jpg",
						username: "用户1",
						time: "2021-01-01 10:00",
						text: "你好，有什么需要帮助的吗？",
						unread: 2,
					},
					{
						avatar: "/static/img/main/avatar.jpg",
						username: "用户2",
						time: "2021-01-02 11:00",
						text: "谢谢你的帮助，问题已经解决了。",
						unread: 0,
					},
					{
						avatar: "/static/img/main/avatar.jpg",
						username: "用户3",
						time: "2021-01-03 12:00",
						text: "你好，请问这个功能怎么使用？",
						unread: 1,
					},
				],
				messageTags: [{
						url: "/static/img/message_icon/zan.png",
						description: "赞和收藏",
						backgroundColor: "#fed8d4",
						messageCount:10,
						jumpTo:"pages/person-detail/PersonalDetail/PersonalDetail"

					},
					{
						url: "/static/img/message_icon/user.png",
						description: "新增关注",
						backgroundColor: "#dae6fe",
						messageCount:100,
						jumpTo:"pages/person-detail/PersonalDetail/PersonalDetail"
					},
					{
						url: "/static/img/message_icon/message.png",
						description: "评论和@",
						backgroundColor:"#d7fced",
						messageCount:10,
						jumpTo:"pages/person-detail/PersonalDetail/PersonalDetail"
					}
				]
			};
		},
		methods:{
			enterThis(e){
				debugger
				uni.navigateTo({
					
					url:e
				})
			}
		}

	};
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 20px;
	}

	.avatar {
		width: 40px;
		height: 40px;
		margin-right: 10px;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.username {
		font-size: 16px;
		color: #333;
	}

	.messages {
		flex: 1;
		overflow-y: scroll;
	}

	.message {
		display: flex;
		align-items: center;
		padding: 20px;
		border-bottom: 1px solid #f5f5f5;
	}

	.message:last-child {
		border-bottom: none;
	}

	.content {
		flex: 1;
		margin-left: 10px;
	}

	.info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.time {
		font-size: 12px;
		color: #999;
	}

	.text {
		font-size: 14px;
		color: #666;
	}

	.unread {
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		background-color: #007aff;
		color: #fff;
		border-radius: 50%;
		font-size: 12px;
		margin-left: 10px;
	}

	.message-tags-class {
		display: flex;
		justify-content: space-evenly;
	}
</style>
